<template>
  <el-dialog
    class="pick-dialog"
    title="售后订单"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="1000px"
  >
    <div class="form-box" v-loading="loading">
      <div class="orderTable">
        <el-table :data="orderList" border style="width: 100%">
          <!-- <el-table-column prop="saleChannel" label="买家"></el-table-column>
          <el-table-column prop="supplyChannel" label="卖家"></el-table-column> -->
          <el-table-column
            prop="no"
            label="售后编号"
            min-width="150"
          ></el-table-column>
          <el-table-column prop="goodsId" label="商品编号"> </el-table-column>

          <el-table-column
            prop="afterAmount"
            label="退款金额"
          ></el-table-column>
          <el-table-column
            prop="platformPayAmount"
            label="平台应付"
          ></el-table-column>
          <el-table-column
            prop="sellerPayAmount"
            label="卖家应付"
          ></el-table-column>
          <!-- <el-table-column prop="" label="买家结算状态">
            <template slot-scope="scope">
              <el-tag
                :type="
                  commonMaps.sellerPayState[scope.row.saleSettlementState].type
                "
                >{{
                  commonMaps.sellerPayState[scope.row.saleSettlementState]
                    .label || commonMaps.sellerPayState["1"].label
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="" label="卖家结算状态">
            <template slot-scope="scope">
              <el-tag
                :type="
                  commonMaps.sellerPayState[scope.row.supplySettlementState]
                    .type
                "
                >{{
                  commonMaps.sellerPayState[scope.row.supplySettlementState]
                    .label || commonMaps.sellerPayState["1"].label
                }}</el-tag
              >
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div class="info-table" v-if="buyerBill">
        <el-descriptions
          title="买家信息"
          labelClassName="label-txt"
          border
          :column="2"
        >
        <el-descriptions-item label="买家">{{ info.saleChannel }}</el-descriptions-item>
        <el-descriptions-item label="退款金额">{{ info.afterAmount }}</el-descriptions-item>
          <el-descriptions-item label="结算方式">{{
            buyerBill.state == 3 ? "结算到余额" : "直接打款"
          }}</el-descriptions-item>
          <el-descriptions-item label="结算状态">
            <el-tag
                :type="
                  commonMaps.sellerPayState[info.saleSettlementState].type
                "
                >{{
                  commonMaps.sellerPayState[info.saleSettlementState]
                    .label || commonMaps.sellerPayState["1"].label
                }}</el-tag
              >
          </el-descriptions-item>
          <el-descriptions-item span='2' label="结算备注">{{
            buyerBill.remark
          }}</el-descriptions-item>
          <el-descriptions-item span='2' label="结算截图">
            <div v-if="buyerImgs && buyerImgs.length">
              <el-image
                style="
                  width: 80px;
                  height: 80px;
                  margin-right: 10px;
                  margin-bottom: 10px;
                "
                :preview-src-list="buyerImgs"
                preview
                v-for="(img, i) in buyerImgs"
                :key="i"
                :src="img"
              ></el-image>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="info-table" v-if="sellerBill">
        <el-descriptions
          title="卖家信息"
          labelClassName="label-txt"
          border
          :column="2"
        >
        <el-descriptions-item label="卖家">{{ info.supplyChannel }}</el-descriptions-item>
        <el-descriptions-item label="应退金额">{{ info.sellerPayAmount }}</el-descriptions-item>
          <el-descriptions-item label="结算方式">{{
            sellerBill.state == 3 ? "结算到余额" : "直接打款"
          }}</el-descriptions-item>
            <el-descriptions-item label="结算状态">
            <el-tag
                :type="
                  commonMaps.sellerPayState[info.supplySettlementState].type
                "
                >{{
                  commonMaps.sellerPayState[info.supplySettlementState]
                    .label || commonMaps.sellerPayState["1"].label
                }}</el-tag
              >
          </el-descriptions-item>
          <el-descriptions-item span='2' label="结算备注">{{
            sellerBill.remark
          }}</el-descriptions-item>
          <el-descriptions-item span='2' label="结算截图">
            <div v-if="sellerImgs && sellerImgs.length">
              <el-image
                style="
                  width: 80px;
                  height: 80px;
                  margin-right: 10px;
                  margin-bottom: 10px;
                "
                :preview-src-list="sellerImgs"
                preview
                v-for="(img, i) in sellerImgs"
                :key="i"
                :src="img"
              ></el-image>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import orderAfterApi from "@/api/pickUp/afterSale.js";
import orderApi from "@/api/pickUp/order.js";
import billListApi from "@/api/financeCenter/billList.js";
export default {
  name: "afterOrderView",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      info: "",
      orderList: [],
      buyerImgs: [],
    
      sellerImgs: [],
      buyerBill: "",
      sellerBill: "",
    };
  },
  created() {
    this.uploadImgUrl = process.env.VUE_APP_BASE_API + "/upload/image";
  },
  methods: {
    open(row) {
      this.orderList = [row];
      this.info = row;
      this.dialogVisible = true;
      this.getBillInfo()
    },
    // 获取账单详情
    async getBillInfo() {
      if (this.info.saleFinancialStatementId) {
        let res1 = await billListApi.getBillInfo(
          this.info.saleFinancialStatementId
        );
        this.buyerBill = res1.data;
        if (this.buyerBill.img) {
          let imgs = [];
          let arr = JSON.parse(this.buyerBill.img);
          arr.forEach((r) => {
            imgs.push(r.url);
          });
          this.buyerImgs = imgs;
        }
      }
      if (this.info.supplyFinancialStatementId) {
        let res2 = await billListApi.getBillInfo(
          this.info.supplyFinancialStatementId
        );

        this.sellerBill = res2.data;
        if (this.sellerBill.img) {
          let imgs = [];
          let arr = JSON.parse(this.sellerBill.img);
          arr.forEach((r) => {
            imgs.push(r.url);
          });
          this.sellerImgs = imgs;
        }
      }
    },
 
    close(formName) {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.order-info {
  box-sizing: border-box;
  // height: 50px;
  background: #eee;
  padding: 15px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  line-height: 26px;

  > span {
    margin-right: 20px;
  }
}
.form-box {
  .info-table {
    margin-bottom: 20px;
  }
}

</style>
